<template>
  <div :class='["call-center", visibleLoading ? "call-position" : ""]' ref = 'callCenter'>
    <operation @initialize = 'pbxInitialize' @isLoading = 'isLoading'></operation>
    <div class = 'call_center_mask loading' v-loading = 'visibleLoading' v-show = 'visibleLoading' :style = '{width: maskWidth + "px"}'></div>
    <div class = 'call_center_mask default_img' :style = '{width: maskWidth + "px"}' v-show = 'visibleDefault'>

    </div>
    <keep-alive>
      <router-view @routeChange="routeChange" v-if = 'showRouter'></router-view>
    </keep-alive>
  </div>
</template>
<script>
  import operation from '../base/operationPBX/'
  export default {
    name: 'callMain',
    data () {
      return {
        options: [],
        value: '1',
        tabType: '',
        visibleLoading: true,
        showRouter: false,
        loading: true,
        maskWidth: 0
      }
    },
    methods: {
      routeChange (tabType) {
        this.tabType = tabType
      },
      pbxInitialize (state) {
        this.visibleLoading = false
        this.showRouter = state
      },
      isLoading (state) {
        if (state !== this.visibleLoading) {
          this.visibleLoading = state
        }
      },
      setMaskWidth () {
        this.maskWidth = this.$refs.callCenter.offsetWidth
      }
    },
    components: {
      operation
    },
    beforeMount () {
    },
    computed: {
      visibleDefault () {
        if (this.$store.state.session.account.pbx) {
          return (this.$store.state.session.account.pbx.length <= 0)
        } else {
          return true
        }
      }
    },
    mounted () {
      this.setMaskWidth()
    }
  }
</script>
<style lang="stylus" scoped>
  .call-center
    height 100%
    overflow-y auto
  .call-position
    position relative
  .loading
    position absolute
    width 100%
    height 100%
    z-index 2
  .default_img
    position absolute
    width 100%
    height 100%
    z-index 3
    background-color white
    background-image url(../../../../assets/img/call_center_blank.png)
    background-repeat no-repeat
    background-position center
</style>
